<template>
	<div>
		<div v-show="showClassInfo" id="appbar-style" style="">
		<mu-appbar :title="dqkc.djj" class="example-appbar flex-appbar" style="position: relative; background-color: #f5f5f5;">
			<section id="top-appbar" >
				<section style="font-size: 1.1rem; color: #343434;flex: 0.7;"></section>
				<section style="flex: 4;">
					<span class="move-mid" style="color: #343434;">
				    	{{dqkc.djj}}
				    	<mu-icon-menu icon="expand_more" slot="left"  @change="handleChange" :value="index" class="arrow-down" >
					    	<mu-menu-item :value="kcxxIndex" :title="'第'+kcxx.courseWhichIndex+'-'+(parseInt(kcxx.courseWhichIndex)+1)+'节'" v-for="(kcxx,kcxxIndex) in todayCourse"/>
					    </mu-icon-menu>
				    </span>
					
					
				</section>
			</section>
	    	<mu-flat-button v-show="barButton" @click="btnhandleChange" :label="label" slot="right" style="color: #343434;"/>	 </mu-appbar>
		<section class="card-list" >
			<section class="class-detail-info">
	    		<mu-icon class="list-icon"  value="description" color="blue" />
	    		<span @click="showClassInfoDetail(dqkc.kcmc)">{{InterceptContent(dqkc.kcmc)}}</span>	    	</section>
			<section class="class-detail-info">
	    		<mu-icon class="list-icon"  value="perm_identity" color="orange700" />
	    		<span>{{dqkc.rkjs}}</span>
	    	</section>
			<section class="class-detail-info">
	    		<mu-icon class="list-icon"  value="receipt" color="orange700" />
	    		<span>{{dqkc.sj}}</span>
	    	</section>
	    	<section class="class-detail-info">
	    		<mu-icon class="list-icon"  value="event" color="blueGrey500" />
	    		<span>{{dqkc.zc}}</span>
	    	</section>
	    	<section class="class-detail-info">
	    		<mu-icon class="list-icon"  value="room" color="green500" />
	    		<span>{{dqkc.dd.length==0?'上课地点另行通知':dqkc.dd}}</span>
	    	</section>
			<section  class="class-detail-info" @click="showClassInfoDetail(dqkc.teaContent)">
	    		<mu-icon class="list-icon"  value="import_contacts" color="#bb75f6" />
	    		<span>{{InterceptContent(dqkc.teaContent)}}</span>
	    	</section>
	    	
	    	
	    	<!--<mu-dialog style="width: 100%;box-shadow: 0 0 0 rgba(255,255,255,0);"  :open="isTeaContent" @close="dqkc.isTeaContent=false"  scrollable>
		         <mu-list>
		          	{{classInfoContent}}
		        </mu-list>
		    </mu-dialog>-->
	    	
	    	
		</section>
		
		
		
<!--		<mu-flat-button label="推荐点名" class="demo-flat-button"  v-show="barButton" @click="btnhandleChange" v-if="userIdentity=='Teacher'"/>
-->		
	</div>
		<div v-show="todayCourse.length==0" class="no_class">
		<mu-icon value="report_problem" :size="72" color="orange"/>
		<div>今天您没有课程</div>
	</div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data(){
			return{
				dqkc:{
//					sj:'',
					zc:'',
					djj:'',
					dd:'',
					kcmc:'',
					rkjs:'',
					teaContent:'',
					isTeaContent:false,
				},
				index:0,
				barButton:{},
				label:'',
				todayCourse:null,
				showClassInfo:false
			}
		},
		methods:{
			handleChange (val) {
				this.index=val;
				this.$emit('fatherDo',this.todayCourse[val]); 
	    	},
	    	btnhandleChange(){
				this.$emit('handchange');
			},
			InterceptContent(val){
				var content=val
				if(val==null){
					content='此教学内容还未上传'
				}else if(val.length==0){
					content='此教学内容还未上传'
				}else if(val.length>=12){
					content=val.substr(0,12)+'...'
				}
	//			if(val.length>=8){
	//				content=val.substr(0,8)+'...'
	//			}
				return content
			},
//			async getTodayCourse(){
//				await this.$store.commit('getCourse')
//			},
			arrangeClassInfo(Index){
				this.dqkc = {
		     		sj:this.todayCourse[Index].currentDate,
		      		zc:'第'+this.todayCourse[Index].courseWhichWeek+'周,星期'+this.todayCourse[Index].courseWhichDay,
		      		djj:'第'+this.todayCourse[Index].courseWhichIndex+'-'+(parseInt(this.todayCourse[Index].courseWhichIndex)+1)+'节',
		      		dd:this.todayCourse[Index].courseClassroomPosition,
		      		rkjs:this.todayCourse[Index].courseTeacherName,
		      		kcmc:this.todayCourse[Index].courseName,
		      		teaContent:this.todayCourse[Index].teachContent
	    		} 
	    		this.showClassInfo=true
			}
			
		},
		mounted(){
			
		},
		computed:{
			watchCourse(){
				this.todayCourse=this.$store.state.todayCourse
				console.info(this.todayCourse.length==undefined)
				if(this.todayCourse.length!=undefined){
					this.arrangeClassInfo(this.index)
				}
				return this.todayCourse
			},
		},
		watch:{
			watchCourse(){
//				this.arrangeClassInfo(this.index)
			},
			index(val){
				this.$emit('passInfo',this.todayCourse[this.index])
	     		this.arrangeClassInfo(this.index)
			}	
			
		}
	}
</script>

<style scoped>
ul,li{
	margin: 0;
}
.no_class{
	padding:150px 0;
	font-size:24px;
	text-align: center;
}
.arrow-down{
	display: block;
	position: absolute !important;
	left:4rem;
	color: #282828;
	height: 2.8rem;
	top: 0;
}
.arrow-down .mu-icon{
	position: relative !important;
	top:-0.2rem;
}
.arrow-down .mu-icon-button{
	height: 2.8rem!important;
}

/*.flex-appbar{
	display: flex;
	justify-content: center;
}

.flex-appbar section:nth-child(1),.flex-appbar section:nth-child(3){
	flex: 1;
}
.flex-appbar section:nth-child(1){
	flex: 4;
}*/
#appbar-style{
	margin-top:3.2rem;
	/*margin-top: 3.2rem;*/
}
#appbar-style .mu-appbar{
	background-color: white;
	height: 2.8rem;
	box-shadow: none;
	
}
.flex-appbar{
}
.move-mid{
	/*width: 5rem;*/
	height: 2.8rem;
	text-align: left;
	line-height: 2.8rem;
	display: block;
	font-size: 1.1rem;
	position: relative;
	/*flex: 5;*/
}
#top-appbar{
	width: 100%;
	height: 2.8rem;
	position:absolute;
	left: 0;
	top:0; 
	display:flex;
	justify-content: center;
	align-items: center;
}
.back-home{
	width:3.5rem; 
	position: absolute;
	left: 0;
	top: 0; 
	display: flex;
	justify-content: center;
	align-items: center;
}
.card-list{
	/*margin:0 0.5rem 0 0.5rem;*/ 
	border-radius: 2px;
	margin: 0 3.2% 0 3.2%;
}
.class-detail-info{
	width: 100%; 
	height: 2.6rem; 
	display: flex; 
	flex-direction: row; 
	text-indent: 0.2rem;
}
.class-detail-info span{
	display: block;
	color:#1f1f1f ;
	/*color:#818181;*/
	font-size: 1rem ;
	/*width: 100%;*/
	text-align: left;
	height: 2.6rem;
	flex: 5;
	line-height: 2.6rem;
	text-indent: 9px;
}
.list-icon{
	height: 2.6rem;
	line-height: 2.6rem;
	flex: 0.5;
	text-align: left;
}
</style>